<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>航模队进校申请</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="航模队进校申请">
	<meta name="apple-mobile-web-app-capable" content="航模队进校申请">
	<meta name="apple-touch-fullscreen" content="航模队进校申请">
	<meta name="HandheldFriendly" content="航模队进校申请">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/materialize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/normalize.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.carousel.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.theme.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/owl.transitions.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/fakeLoader.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/style.css">
	<style>
		.form-field{
			color: #000000;
			font-size: 1.2rem;
			line-height: 2.5rem;
		}
		.add {
			display: inline-block;
			width: 76px;
			height: 76px;
			color: #ccc;
			border: 2px dashed #C9CACA;
			border-radius: 10px;
			text-indent: -12em;
			transition: color .25s;
			position: relative;
			overflow: hidden;
		}
		.add:hover {
			color: #34538b;
		}
		.add::before, .add::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
		}
		.add::before {
			width: 20px;
			border-top: 4px solid;
			margin: -1px 0 0 -10px;
		}
		.add::after {
			height: 20px;
			border-left: 4px solid;
			margin: -10px 0 0 -2px;
		}
	</style>
</head>
<body>
	<!-- contact us -->
	<div class="pages section" style="margin-top: 0;">
		<div class="container">
			<div class="contact-us">
				<div class="row">
					<div class="col s12">
						<div class="form-group">
							<label class="form-field">学校名称 <label style="color: #E60012;">*</label> </label>
						</div>
						<div class="form-group">
							<input type="text" class="validate" id="school" name="school" placeholder="请输入学校名称" required>
						</div>
						<div class="form-group">
							<label class="form-field">负责人姓名 <label style="color: #E60012;">*</label> </label>
						</div>
						<div class="form-group" >
							<input type="text" class="validate" id="guardian" name="guardian" placeholder="请输入负责人姓名" required>
						</div>
						<div class="form-group">
							<label class="form-field">负责人联系方式 <label style="color: #E60012;">*</label> </label>
						</div>
						<div class="form-group" >
							<input type="text" class="validate" id="phone" name="phone" placeholder="请输入负责人联系方式" required>
						</div>
						<div class="form-group">
							<label class="form-field">附件<label style="color: #E60012;">*</label> </label>
						</div>
						<div class="form-group" >
							<div >
								<span class="add" title="继续上传" onclick="this.nextElementSibling.click()"></span>
								<input type="file" name="file" id="inputFile" onchange="changeFile()" style="display: none" accept="image/*">
								<input type="hidden" id="file" />
								<img id="uploadImg" src="" style="width: 100px;"/>
							</div>
						</div>
						<div class="form-group">
							<button class="btn button-default" type="button" onclick="signup()">立即报名</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end contact us -->
	
<!-- loader -->
	<div id="fakeLoader"></div>
	<!-- end loader -->

	
	<!-- scripts -->
	<script src="${request.contextPath}/statics/js/jquery.min.js"></script>
	<script src="${request.contextPath}/statics/js/materialize.min.js"></script>
	<script src="${request.contextPath}/statics/js/owl.carousel.min.js"></script>
	<script src="${request.contextPath}/statics/js/fakeLoader.min.js"></script>
	<script src="${request.contextPath}/statics/js/contact-form.js"></script>
	<script src="${request.contextPath}/statics/js/main.js"></script>

	<script>
		function signup(){
			var school = $("#school").val();
			if(!school){
				alert("请输入学校名称");
				return;
			}

			var guardian = $("#guardian").val();
			if(!guardian){
				alert("请输入负责人姓名");
				return;
			}
			var phone = $("#phone").val();
			if(!phone){
				alert("请输入负责人联系方式");
				return;
			}

			var file = $("#file").val();
			if(!file){
				alert("请上传附件");
				return;
			}

			$.ajax({
				type: 'GET',
				url: '${request.contextPath}/h5/subSignup',
				data: {
					school: school,
					guardian: guardian,
					phone: phone,
					categoryId: 2, //航模队表演申请
					file: file,
				},
				success: function (res) {
					if(res.code === 0){
						alert("报名成功");
						window.location.href="${request.contextPath}/h5/signup-expert";
					}else{
						alert(res.msg);
					}
				}
			});
		}
		function changeFile() {
			let fileDom = document.getElementById('inputFile');
			let imgDom = document.getElementById('uploadImg'); // 页面的img对象
			let reader = new FileReader(); // 读取计算机文件对象，详见下边扩展
			reader.readAsDataURL(fileDom.files[0]);
			reader.onload = (e) => {
				let img = new Image(); // 创建图片对象实例
				img.src = e.target.result; // 设置图片的src为上传的图片
				img.onload = () => {
					console.log(img.width); // 750 ，得到上传图片的实际宽度为750px
					console.log(img.height); // 1280 ，得到上传图片的实际高度为1280px
				}
				imgDom.src = e.target.result; // 给img标签赋值，图片就能显示啦！

				let form = new FormData();
				form.append('file', $('#inputFile').get(0).files[0]);
				$.ajax({
					url: "/h5/upload",
					type: "POST",
					data: form,
					processData: false, // 必须false才会避开jQuery对 formdata 的默认处理
					contentType: false, // 必须false才会自动加上正确的Content-Type
					xhr: function(){
						myXhr = $.ajaxSettings.xhr();
						if(myXhr.upload){
							myXhr.upload.addEventListener('progress',function(e) {
								//progressBar.style.width = e.loaded / e.total * 100 + '%';
							}, false);
						}
						return myXhr;
					},
					success: function(res){
						// 请求成功
						console.log(res);
						$("#file").val(res.data.location);
					},
					error: function(res) {
						// 请求失败
						console.log(res);
					}
				});
			}
		}


	</script>

</body>
</html>
